<template>
  <div id="app">
    <c-loading @setStep="handleStartScense" v-if="index === 0" @resource="handleResource" />
    <transition-group name="fade">
      <c-home v-show="index === 1" :key="`home`" @setStep="handleStartScense"></c-home>
      <c-skiing ref="skiing" v-if="index === 2" :key="`skiing`"></c-skiing>
    </transition-group>

    <c-audio v-if="index != 0"></c-audio>
  </div>
</template>

<script>
import Loading from "./components/Loading.vue"
import Home from "./components/Home.vue"
import Skiing from "./components/Skiing.vue"
import Audio from "./components/Audio.vue"

export default {
  name: "App",
  data() {
    return {
      index: 0,
    }
  },
  components: {
    "c-loading": Loading,
    "c-home": Home,
    "c-skiing": Skiing,
    "c-audio": Audio,
  },
  methods: {
    handleStartScense(step) {
      setTimeout(() => {
        this.index = step
      }, 100)
      // this.index = 2
    },
    handleResource() {},
  },
}
</script>

<style lang="scss">
#app {
  background-image: url("/assets/imgs/bg.png");
  width: 100vw;
  height: 100vh;
  background-size: contain;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.25s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }

  .move-enter-active,
  .move-leave-active {
    transition: opacity 0.6s, transform 0.4s;
  }
  .move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    // top: -10vh;
    transform: translateY(-10vh);
  }

  .fadeInOut-enter-active {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    transition: opacity 0.5s, transform 0.2s;
  }
  .fadeInOut-leave-active {
    transition: opacity 0.5s, transform 0.2s;
  }
  .fadeInOut-enter {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

  .fadeInOut-leave-to {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  @keyframes start-tada {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    2.5%,
    5% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    7.5%,
    12.5%,
    17.5%,
    22.5% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    10%,
    15%,
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    25% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
}
</style>
